<template>
	<view class="login-container">
		<view class="img-container">
			<image class="login-img" src="/static/icons/u2130.jpg"></image>
		</view>
		<view class="verify-text">
			<text>账号密码登录</text>
			<text>欢迎使用家医</text>
		</view>
		<view class="phone">
			<text>手机号码</text>
			<input class="phone-div" v-model="loginInfo.phone" type="text" placeholder="请输入手机号码" placeholder-style="color: #ccc; font-size: 28rpx;" />
		</view>
		<view class="verify">
			<text>密码</text>
			<view class="verify-div">
				<input type="text" v-model="loginInfo.password" placeholder="请输入密码" placeholder-style="color: #ccc; font-size: 28rpx;" />
			</view>
		</view>
		<view class="custom-checkbox" @click="toggleAgree">
			<!-- 自定义选框 -->
			<view class="checkbox-box" :style="{ backgroundColor: isAgreed ? '#2984F8' : '#FFF' }">
				<text v-if="isAgreed" class="icon-check">✓</text>
			</view>
			<text>我已阅读并同意</text>
			<text class="blue">《用户隐私政策》</text>
			<navigator url="/loginPackage/pages/forgetPassword/forgetPassword">
				<view class="foget-password">忘记密码？</view>
			</navigator>
		</view>
		<button class="login-btn" @click="login()">登录</button>
		<view class="login-buttom">
			<text>免密登录</text>
			<navigator url="/loginPackage/pages/register/register">
				<text>注册新用户</text>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
import { userloginApi } from '../../../api/login';
import { useUserStore } from '../../../store/user';
	
	const isAgreed = ref(false);
	//获取仓库
	const userStore = useUserStore();
	const toggleAgree = () => {
		isAgreed.value = !isAgreed.value;
	};
	
	//登录手机密码数据
	const loginInfo = ref({
		phone:'17311680083',
		password:'123456'
	})
	
	//手机密码登录方法
	function login (){
		if (!isAgreed.value) {
			uni.showModal({
				title: '提示',
				content: '请先阅读并同意用户隐私政策',
				showCancel: false
			});
			return;
		}
		userloginApi({
			...loginInfo.value
		}).then(res =>{
			if(res.code == 200){
				uni.setStorageSync('user_token', res.token);
			
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration:5000,
					success: () => {
						
						userStore.getUserInfoAction();
						uni.switchTab({
							url: '/pages/home/home'
						});
					}
				})
			}else{
				uni.showToast({
					title:'登录失败!',
					icon:'error'
				})
			}
		})
	}
	
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 32rpx 32rpx;
	
	}
	
	.img-container {
		margin: 20rpx auto 80rpx;
		width: 200rpx;
		height: 200rpx;
	
		.login-img {
			width: 100%;
			height: 100%;
		}
	}
	
	.verify-text {
		font-size: 48rpx;
		color: #333333;
		display: flex;
		flex-direction: column;
	
		text:last-child {
			color: #999999;
			font-size: 28rpx;
			margin-top: 10rpx;
			margin-bottom: 80rpx;
		}
	}
	
	.phone {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	
		.phone-div {
			background-color: #f2f7fb;
			width: 626rpx;
			height: 88rpx;
			margin-top: 20rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			padding:0 30rpx;
	

			}
		}
	
	
	.verify {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 30rpx;
	
		.verify-div {
			background-color: #f2f7fb;
			width: 100%;
			height: 88rpx;
			margin-top: 20rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
	
			input {
				margin-left: 30rpx;
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				color: #2984F8;
			}	
		}
	}
	
	.custom-checkbox {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-top: 40rpx;
		color: #ccc;
	
		.checkbox-box {
			width: 30rpx;
			height: 30rpx;
			border: 4rpx solid #ccc;
			border-radius: 6rpx;
			margin-right: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s;
	
			.icon-check {
				color: white;
				font-size: 20rpx;
			}
		}
	
		.blue {
			color: #1877f2;
		}
	}
	.login-btn{
		background-color: #2984F8;
		color: #f2f7fb;
		margin-top: 50rpx;
	}
	.login-buttom{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #1877f2;
		font-size: 28rpx;
	}
	.foget-password{
		color: #ccc;
		font-size: 28rpx;
		margin-left: 60rpx;
	}
</style>
